import { columns, refreshComponent, tableActiveKey } from "./store";
import { getActionOptions } from "./utils";
import {
  classOptions,
  transformStatusMap,
  userStatusMap,
  userTypeMap,
} from "./dict";
import { fetchList, handleAction } from ".";
import IMToolTip from "@/components/common/ToolTip";
export const tablePage = renderTablePage();
export const tableLoading = ref(false);
export const tableData = ref([]);
const defineHeaderCellMap = (number, { title, column }) => {
  const renderBasicCell = (content = $t("grade43")) => (
    <div
      data-icon-width="14px"
      class="s-table-header_cell"
      style="column-gap: 5px"
    >
      <i>{title}</i>
      <tips-cell content={content} />
    </div>
  );
  const renderConsumeNum = () => renderBasicCell();
  const renderConsumeTotalMoney = () => renderBasicCell($t("grade44"));
  const renderConsumeLastTime = () => renderBasicCell($t("grade45"));
  const renderDefault = () => <div class="s-table-header_cell">{title}</div>;
  return new Map([
    ["consumeNum", renderConsumeNum],
    ["consumeTotalMoney", renderConsumeTotalMoney],
    ["consumeLastTime", renderConsumeLastTime],
    ["default", renderDefault],
  ]);
};
const handleRenderHeaderCellTask = (number, props) => {
  const cellApi = defineHeaderCellMap(number, props);
  const renderCell = cellApi.get(props.column.key) || cellApi.get("default");
  // @ts-ignore
  return renderCell();
};

const defineBodyCellMap = (number, { value, text, index, column, record }) => {
  const renderConversion = () => (
    <div>
      <i class={classOptions[value]}>
        {selectDictLabel(transformStatusMap.value, value)}
      </i>
    </div>
  );

  const renderAge = () => (
    <div>
      <i>{record.age != 0 ? record.age : undefined}</i>
    </div>
  );

  const renderVipLevel = () => (
    <div>
      <i>{record.vip_level != 0 ? record.vip_level : undefined}</i>
    </div>
  );

  const renderPopularLevel = () => (
    <div>
      <i>{record.popular_level != 0 ? record.popular_level : undefined}</i>
    </div>
  );

  const renderScoreLevel = () => (
    <div>
      <i>
        {record.score_level != 0
          ? $t("table215") + record.score_level
          : undefined}
      </i>
    </div>
  );

  const renderAvatar = () => (
    <div>
      <a-avatar
        size={32}
        src={record?.avatar}
        onClick={$preview.bind(this, record.avatar)}
      />
    </div>
  );

  const renderIsLock = () => (
    <div>
      {record.is_lock == 1 || record.is_lock == 2 ? (
        <i class="s-dc3545 s-table-body_cell">{$t("base.disable")}</i>
      ) : record.is_lock === 0 ? (
        <i
          class={[
            record.status === 0 ? "s-c1c1c1" : "s-52c41a",
            "s-table-body_cell",
          ]}
        >
          {selectDictLabel(userStatusMap, record?.status == 0 ? 0 : 1)}
        </i>
      ) : undefined}
    </div>
  );

  const renderAccountType = () => (
    <div>
      <i class="s-table-body_cell">
        {selectDictLabel(userTypeMap, record?.account_type)}
      </i>
    </div>
  );

  const renderCountry = () => <im-tooltip value={record.country} />;
  const renderAction = () => {
    const options = getActionOptions({ handleAction, record });
    return (
      <div>
        {options.length ? (
          <div>
            {refreshComponent.value ? (
              <s-dropdown title={getProxyT("base.action")} options={options} />
            ) : null}
          </div>
        ) : null}
      </div>
    );
  };

  return new Map([
    [{ key: "index", state: /[01]/ }, renderIndex],
    [{ key: "created_at", state: /[1]/ }, renderCreatedAt],
    [{ key: "conversion", state: /[0]/ }, renderConversion],
    [
      { key: "userInfo", state: /[01]/ },
      renderUserInfo.bind({ record, tableLoading }, { isDisplay: true }),
    ],
    [{ key: "age", state: /[0]/ }, renderAge],
    [{ key: "vip_level", state: /[0]/ }, renderVipLevel],
    [{ key: "popular_level", state: /[0]/ }, renderPopularLevel],
    [{ key: "score_level", state: /[0]/ }, renderScoreLevel],
    [{ key: "avatar", state: /[01]/ }, renderAvatar],
    [{ key: "is_lock", state: /[0]/ }, renderIsLock],
    [{ key: "account_type", state: /[0]/ }, renderAccountType],
    [{ key: "country", state: /[0]/ }, renderCountry],
    [{ key: "action", state: /[0]/ }, renderAction],
  ]);
};
const handleRenderBodyCellTask = (number, props) => {
  const array = [...defineBodyCellMap(number, props)].filter(
    ([object]) => object.key === props.column.key && object.state.test(number)
  );
  const _this = { number, tablePage, ...props };
  return array.map(([, value]) => value.call(_this));
};
export const tableConfig = () => {
  const defineTable = {
    pagination: tablePage,
    loading: tableLoading,
    on: {
      change(paging: { current: number; pageSize: number }) {
        tablePage.current = paging.current;
        tablePage.pageSize = paging.pageSize;
        fetchList();
      },
    },
    columns,
    dataSource: tableData,
    tableSlot: {
      bodyCell: (props) =>
        handleRenderBodyCellTask(tableActiveKey.value, props),
      headerCell: (props) =>
        handleRenderHeaderCellTask(tableActiveKey.value, props),
    },
  };

  return defineTable;
};
